<template>
	<view class="content">
		<bgyx-nav-bar name="直播间">
			<view style="display: flex;align-items: center;margin-bottom: 8rpx;">
				<image @click="gofabu" src="/static/images/zzbe.png"
					style="width: 60rpx;height: 60rpx;margin-right: 15rpx;" mode=""></image>
			</view>
		</bgyx-nav-bar>
		
		<view style="width: 100%;" v-if="list0.length > 0 || list1.length > 0">
			<view style="width: 100%;display: flex;height: 100%;overflow-y: auto;justify-content: space-around;">
				<view style="width: 50%;display: flex;flex-direction: column;align-items: center;padding: 10rpx;">
					<view @click="goliveroom(item)" style="width: 100%;display: flex;flex-direction: column;border-radius: 12rpx;margin-bottom: 25rpx;" v-for="(item,k) in list0">
						<image :src="$store.state.common.systemInfo.fileurl + item.picture" style="width: 100%;border-radius: 12rpx;" mode="widthFix"></image>
						<view style="background: linear-gradient(to bottom,#00000000,#1a1a1a);height: 240rpx;display: flex;align-items: flex-end;border-radius: 12rpx;margin-top: -240rpx;z-index: 9;">
							<view style="width: 100%;padding: 10rpx;color: #abd1ff;display: flex;align-items: center;" class="u-line-1">
								<bgyx-user-avatar :id="item.uid" size="40" /> <view style="margin-left: 10rpx;">{{item.name}}</view>
							</view>
						</view>
					</view>
				</view>
				
				<view style="width: 50%;display: flex;flex-direction: column;align-items: center;padding: 10rpx;">
					<view @click="goliveroom(item)" style="width: 100%;display: flex;flex-direction: column;border-radius: 12rpx;margin-bottom: 25rpx;" v-for="(item,k) in list1">
						<image :src="$store.state.common.systemInfo.fileurl + item.picture" style="width: 100%;border-radius: 12rpx;" mode="widthFix"></image>
						<view style="background: linear-gradient(to bottom,#00000000,#1a1a1a);height: 240rpx;display: flex;align-items: flex-end;border-radius: 12rpx;margin-top: -240rpx;z-index: 9;">
							<view style="width: 100%;padding: 10rpx;color: #abd1ff;display: flex;align-items: center;" class="u-line-1">
								<bgyx-user-avatar :id="item.uid" size="40" /> <view style="margin-left: 10rpx;">{{item.name}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view v-else style="width: 100%;display: flex;justify-content: center;margin-top: 300rpx;flex-direction: column;align-items: center;">
			<u-empty text="暂无直播间"></u-empty>
			<view @click="gofabu" style="width: 190rpx;height: 80rpx;background: #4a92ff;display: flex;justify-content: center;align-items: center;border-radius: 40rpx;color: white;margin-top: 50rpx;">
				开始直播
			</view>
		</view>
		
		<u-popup mode="center" border-radius="16" v-model="showp">
			<view style="width: 620rpx;display: flex;flex-direction: column;align-items: center;padding: 20rpx;">
				<view style="font-size: 36rpx;font-weight: bold;margin-top: 15rpx;">
					直播间密码
				</view>
				<view style="width: 500rpx;display: flex;justify-content: center;padding: 30rpx;">
					<u-input focus style="width: 320rpx;" v-model="pswd" placeholder="输入直播间密码" border></u-input>
				</view>
				
				<view style="width: 400rpx;display: flex;justify-content: center;padding: 10rpx;">
					<u-button @click="yzmpswd" style="width: 320rpx;" type="primary" size="medium">确定</u-button>
				</view>
			</view>
		</u-popup>
		
		<bgyx-tab-bar />
	</view>


</template>

<script>
	import {
		mapState
	} from 'vuex';
	import {
		pub
	} from '../../common/event';
import moment from 'moment/moment';
import utils from '../../utils';
	export default {
		data() {
			return {
				showp:false,
				pswd:'',
				current:''
			}
		},
		components: {

		},
		computed: {
			...mapState({
				list0:(state)=>{
					return state.liveroom.list.filter((e,k)=> k%2 == 0)
				},
				list1:(state)=>{
					return state.liveroom.list.filter((e,k)=> k%2 == 1)
				}
			})
		},
		onShow() {
			
		},
		methods: {
			gofabu:async function(){
				const retps = await utils.checkPermission("请打开摄像头和麦克风权限")
				if (!retps) {
					uni.showToast({
						title: "请打开摄像头和麦克风权限",
						icon: "none"
					})
					return
				}
				// #ifdef APP
				uni.navigateTo({
					url:"/pages/user/goliveroom"
				})
				// #endif
				// #ifdef H5
				uni.navigateTo({
					url:"/pages/user/goliveroomh5"
				})
				// #endif
			},
			goliveroom:function(item){
				if(item.password){
					this.pswd = ''
					this.current = item
					this.showp = true
				}else{
					// #ifdef APP
					uni.navigateTo({
						url:"/pages/meeting/enterroom?uid="+item.uid + "&id="+item.id
					})
					// #endif
					// #ifdef H5
					uni.navigateTo({
						url:"/pages/meeting/enterroomh5?uid="+item.uid + "&id="+item.id
					})
					// #endif
				}
				
			},
			yzmpswd:function(){
				if(this.pswd != this.current.password){
					uni.showToast({
						title:"密码错误",
						icon:"none"
					})
				}else{
					this.showp = false
					this.pswd = ''
					// #ifdef APP
					uni.navigateTo({
						url:"/pages/meeting/enterroom?uid="+this.current.uid + "&id="+this.current.id
					})
					// #endif
					// #ifdef H5
					uni.navigateTo({
						url:"/pages/meeting/enterroomh5?uid="+this.current.uid + "&id="+this.current.id
					})
					// #endif
				}
			}
		}
	}
</script>


<style scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		height: 100vh;
		overflow-y: hidden;
		padding-bottom: 120rpx;
		background: #363546;
	}
</style>